<template>
    <div class="InboundList-box">
        <!-- 消息通知 -->
         <!-- 测试 -->
        <h3 class="mb16">消息通知</h3>
        <!-- 增删改查 -->
        <div class="function-box" v-if="checkPermi(['system:inventory:edit'])">
                <el-button :class="editId===1? 'addBtn2' : '' "  @click="handleAdd(1)">全部消息 （99+）</el-button>
                <el-button :class="editId===2? 'addBtn2' : '' " @click="handleAdd(2)">未处理 （4+）</el-button>
                <el-button :class="editId===3? 'addBtn2' : '' " @click="handleAdd(3)">已处理 （99+）</el-button>
                <!-- <el-button class="exportBtn">删除</el-button> -->
        </div>
         <!-- 分类管理列表页面 -->
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="totals"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @updatePage="updatePage"
      @updateLimit="updateLimit"
      @changeStatus="changeStatus"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
      :messageOperation='messageOperation'
      @messageView="messageView"
    >
    </forTableCom>

    <!-- 添加或修改参数配置对话框 -->
      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
         <el-form label-position="top" ref="dictRef" :model="form" :rules="rules" label-width="90px">
            <el-form-item label="分类名称" prop="name">
               <el-input v-model="form.name" placeholder="请输入分类名称" />
            </el-form-item>
            <el-form-item label="显示排序" prop="sort">
                     <el-input-number v-model="form.sort" controls-position="right" :min="0" />
            </el-form-item>
            <el-form-item label="描述" prop="description">
               <el-input v-model="form.description" placeholder="请输入描述" />
            </el-form-item>
            <el-form-item label="状态" prop="status" v-if="editId==-1">
               <el-switch
              @change="changeStatus2"
              v-model="form.status"
              class="ml-2"
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
            />
            </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="cancel">{{ editId===-1? '重置' : '取消' }}</el-button>
               <el-button type="primary" @click="submitForm">提交</el-button>
            </div>
         </template>
      </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { checkPermi } from '@/utils/permission.js'
import forTableCom from '@/components/forTableCom/index.vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import serchForm from '@/components/inventory/serchForm.vue'
import {listUser,activityStatusApi,activityAddApi,putDetail} from '@/api/activityClassify/activityClassifyType.js'

const router = useRouter()
const route = useRoute()
const data = reactive({})
const { proxy } = getCurrentInstance();

const title = ref("");
const open = ref(false);
const editId = ref(1)
 const form = ref({
     name:'',  //分类名称
     sort:'',   //排序
     description:'', //描述
     status:true,  //状态
     status2:''
  })
const rules =ref({
    code: [{ required: true, message: "code不能为空", trigger: "blur" }],
    name: [{ required: true, message: "分类名称不能为空", trigger: "blur" }],
  })
/** 表单重置 */
function reset() {
  form.value = {
    name: '',
    sort: undefined,
    status:true,
    description:'',
    status2:''
  };
  proxy.resetForm("dictRef");
}
// 显示操作栏
const messageOperation = ref(true)
let idActive = 'id'
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let total = ref(0)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])
// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
  console.log(v,'打印v')
}
// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  let params = inventoryForm.value
  listUserApiFn(params)
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v)
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v)
}
// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'name',
    label: '状态',
    colorClassName: 'activeColor',
  },
  {
    prop: 'sort',
    label: '内容',
  },
  {
    prop: 'createTime',
    label: '时间',
    colorClassName: 'activeColor',
    sortable:true,
  },
])

const kaiguan = ref(0)
const changeStatus = (val)=>{  //表格里面状态修改
    let {id,status} = val
   if(status==true){
       kaiguan.value=0
       activityStatusApi({id:id,status:kaiguan.value}).then(res=>{
         if (res.code == 200) {
      ElMessage({
        message: '开启成功',
        type: "success",
      });
      listUserApiFn()
    }
     })
   }else{
      kaiguan.value=1
      activityStatusApi({id:id,status:kaiguan.value}).then(res=>{
         if (res.code == 200) {
      ElMessage({
        message: '关闭成功',
        type: "success",
      });
      listUserApiFn()
    }
     })
   } 
}
// 表格数据内容
let inventoryTableData = ref([
    {
      inDate:'素养课程学习',
      warehouseName:'张三',
      inCode:'2024-08-23 18:12',
      id:1
    },
    {
      inDate:'素养课程学习',
      warehouseName:'张三',
      inCode:'2024-08-23 18:12',
      id:2
    },
    {
      inDate:'素养课程学习',
      warehouseName:'张三',
      inCode:'2024-08-23 18:12',
      id:3
    },
    {
      inDate:'素养课程学习',
      warehouseName:'张三',
      inCode:'2024-08-23 18:12',
      id:4
    },
    {
      inDate:'素养课程学习',
      warehouseName:'张三',
      inCode:'2024-08-23 18:12',
      id:5
    },
    {
      inDate:'素养课程学习',
      warehouseName:'张三',
      inCode:'2024-08-23 18:12',
      id:6
    },
    {
      inDate:'素养课程学习',
      warehouseName:'张三',
      inCode:'2024-08-23 18:12',
      id:7
    },
    {
      inDate:'素养课程学习',
      warehouseName:'张三',
      inCode:'2024-08-23 18:12',
      id:8
    },
    {
      inDate:'素养课程学习',
      warehouseName:'张三',
      inCode:'2024-08-23 18:12',
      id:9
    },
    {
      inDate:'素养课程学习',
      warehouseName:'张三',
      inCode:'2024-08-23 18:12',
      id:10
    },
])
const changeStatus2 = (val)=>{ //表单状态修改
     if(val==true){
         ElMessage({
        message: '开启成功',
        type: "success",
      });
     }else{
         ElMessage({
        message: '关闭成功',
        type: "success",
      });
     }
}
/** 新增按钮操作 */
function handleAdd(val) {
  editId.value = val
}
const cancel = ()=>{ //重置
   reset();
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["dictRef"].validate(valid => {
    if (valid) {
      if (editId.value===-1) {
         if(form.value.status==true){
              form.value.status2=0
         }else if(form.value.status==false){
              form.value.status2=1
         }
         form.value.status2 = Number(form.value.status2)
          activityAddApi({...form.value,status:form.value.status2}).then(res=>{
          if(res.code===200){
              ElMessage({
                 message: '添加成功',
                 type: 'success',
               })
               open.value = false
               listUserApiFn()
          }
     })
      } else {
         form.value.id = editId.value
         delete form.value.status
          activityStatusApi(form.value).then(res=>{
              if(res.code===200){
                  ElMessage({
                 message: '编辑成功',
                 type: 'success',
               })
               open.value = false
               listUserApiFn()
              }
          }) 
      }
    }
  });
}

const messageView = (val)=>{  //查看
      let {i , v} = val
      editId.value = v.id
      open.value = true;
      title.value = "查看分类";
      putDetail(v.id).then(res=>{
          if(res.code===200){
              form.value.sort = res.data.sort
              form.value.name = res.data.name
              form.value.description = res.data.description
          }
      })    
}

// 查询活动分类列表数据
const listUserApiFn = async (data = '') => {
  let page = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(data, page)
  let res = await listUser(params)
  let { code, rows } = res
  if (code == 200) {
    total.value = res.total
    // inventoryTableData.value = rows
    inventoryTableData.value = rows.map(item => {
              // 返回新对象，避免修改原始数据
              return {
                  ...item,  // 展开原有属性
                  status: item.status === 0  // 转换status值
              }
          })
          console.log(inventoryTableData.value,'打印活动分类列表数据');
  }
}
onMounted(()=>{
    Promise.all([listUserApiFn()])
})
</script>

<style lang='scss' scoped>
.InboundList-box {
    padding: 16px;
    // box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.16);
    .function-box {
    display: flex;
    align-items: center;
  }
}
.dialog-footer {
  display: flex;
  justify-content: center; /* 水平居中 */
}
</style>
